<template>
  <div>
    <el-container style="background: #f5f7f9;">
      <el-header style="background: #fff;padding: 12px 12px;height:auto;">
        <div>
          <el-form :model="queryData" :inline="true" size="small">
            <el-form-item>
              <el-input v-model="refNumber" type="textarea" :rows="1" style="width: 300px;" placeholder="订单号" />
            </el-form-item>
            <el-form-item v-if="customerOptions && customerOptions.length > 0">
              <el-select v-model="orgOwner" filterable clearable placeholder="请选择客户">
                <el-option v-for="item in customerOptions" :key="item.orgOwnerName" :value="item.orgOwner" :label="item.orgOwnerName" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="list">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <el-main style="margin-top: 15px; background: #fff;padding: 12px 16px 0 16px;height: 100%;">
        <div v-if="!isOrgOwner" style="height: 100%;display: flex;">
          <el-button v-has="60502" size="small" type="primary" @click="importDialogShow2=true">渠道费用导入</el-button>
          <el-button v-has="60503" size="small" type="primary" @click="importDialogShow3=true">订单费用补录</el-button>
        </div>
        <el-table :data="table_body" border stripe :max-height="tableHeight">
          <el-table-column prop="orderNumber" label="订单号" />
          <el-table-column prop="orgOwner" label="客户" />
          <el-table-column prop="refNumbers" label="客户订单号" />
          <el-table-column prop="channelName" label="渠道名称" />
          <el-table-column prop="billedWeight" label="计费重" />
          <el-table-column prop="chargeType" label="费用类型" />
          <el-table-column prop="amount" label="金额" />
          <el-table-column prop="currency" label="币种" />
          <el-table-column prop="txDate" label="交易时间" />
          <el-table-column prop="settlementAmount" label="结算金额" />
          <el-table-column prop="settlementStatus" label="结算状态" />
          <el-table-column prop="trace" label="明细" />
        </el-table>
      </el-main>
      <el-footer style="padding:0;background: #fff;">
        <div style="text-align: right; padding-top: 10px;">
          <el-pagination background :current-page="queryData.currentPage" :page-sizes="[50,100]" :page-size="queryData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal" style="float:right;" @size-change="onPageSizeChange" @current-change="onPageChange" />
        </div>
      </el-footer>
    </el-container>
    <el-dialog title="大货渠道费用导入" :visible.sync="importDialogShow1" width="30%">
      <el-upload :action="importUrl1" :on-success="importCallBack" name="file" :limit="1" :file-list="importFileList" accept=".xlsx" :with-credentials="true" :show-file-list="false" style="display: inline-block;">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      </el-upload>
      <a href="/template/charge_diff1.xlsx" download="大货渠道的费用导入模板.xlsx" style="margin-left:50px;display: inline-block; vertical-align: top;">
        <el-button size="small" type="text">下载模板</el-button>
      </a>
    </el-dialog>
    <el-dialog title="渠道费用导入" :visible.sync="importDialogShow2" width="30%">
      <el-upload :action="importUrl2" :on-success="importCallBack" name="file" :limit="1" :file-list="importFileList" accept=".xlsx" :with-credentials="true" :show-file-list="false" style="display: inline-block;">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      </el-upload>
      <a href="/template/charge_diff2.xlsx" download="渠道费用导入模板.xlsx" style="margin-left:50px;display: inline-block; vertical-align: top;">
        <el-button size="small" type="text">下载模板</el-button>
      </a>
    </el-dialog>
    <el-dialog title="订单费用补录" :visible.sync="importDialogShow3" width="30%">
      <el-upload :action="importUrl3" :on-success="importCallBack" name="file" :limit="1" :file-list="importFileList" accept=".xlsx" :with-credentials="true" :show-file-list="false" style="display: inline-block;">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      </el-upload>
      <a href="/template/charge_order_han.xlsx" download="补录费用模板.xlsx" style="margin-left:50px;display: inline-block; vertical-align: top;">
        <el-button size="small" type="text">下载模板</el-button>
      </a>
    </el-dialog>
    <el-dialog title="卡派费用补录" :visible.sync="importDialogShow4" width="30%">
      <el-upload :action="importUrl4" :on-success="importCallBack" name="file" :limit="1" :file-list="importFileList" accept=".xlsx" :with-credentials="true" :show-file-list="false" style="display: inline-block;">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      </el-upload>
      <a href="/template/charge_truck.xlsx" download="卡派费用模板.xlsx" style="margin-left:50px;display: inline-block; vertical-align: top;">
        <el-button size="small" type="text">下载模板</el-button>
      </a>
    </el-dialog>
  </div>
</template>
<script>
import request from '@/utils/request'
import { mapState } from 'vuex'
import config from '@/settings'
const BASE_URL = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
export default {
  data() {
    return {
      table_body: [

      ],
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      importDialogShow1: false,
      importDialogShow2: false,
      importDialogShow3: false,
      importDialogShow4: false,
      importFileList: [],
      importUrl1: BASE_URL + '/charge/parse?type=ORDER',
      importUrl2: BASE_URL + '/charge/parse?type=CARTON',
      importUrl3: BASE_URL + '/charge/parse?type=SUPPLEMENT',
      importUrl4: BASE_URL + '/charge/parse?type=TRUCK',
      formDataDefault: {
        currency: '',
        amount: '',
        bankCardNumber: '',
        bankRecept: '',
        remark: ''
      },
      formData: {
        txId: '',
        exchangeAmount: '',
        exchangeRate: '',
        currency: '',
        amount: '',
        bankCardNumber: '',
        bankRecept: '',
        remark: ''
      },
      queryData: {
        pageSize: 50,
        currentPage: 0,
        orgOwners: [],
        orderIds: []
      },
      refNumber: '',
      orgOwner: '',
      pageTotal: 0,
      pageSizeOpts: [50, 100]
    }
  },
  computed: {
    tableHeight() {
      return document.documentElement.clientHeight - 280
    },
    pageSize() {
      return this.pageSizeOpts[0]
    },
    ...mapState(//
      {
        customerOptions: state => state.base.customerOptions,
        profile: state => state.user
      }
    ),
    isOrgOwner() {
        return this.profile.orgOwner
    }
  },
  created() {
    this.$store.dispatch('getCustomerOptions')
    this.list()
  },
  mounted() {
  },
  methods: {
    list() {
      if (this.refNumber) {
        this.queryData.orderIds = this.refNumber.split(/\n|,|，/)
      } else {
        this.queryData.orderIds = []
      }
      if (this.orgOwner) {
        this.queryData.orgOwners = [(this.orgOwner)]
      } else {
        this.queryData.orgOwners = []
      }
      request({
        url: 'charge/order-charge',
        method: 'post',
        data: this.queryData
      }).then(res => {
        if (res.success) {
          if (res.data) {
            this.table_body = res.data.records
            this.pageTotal = res.data.total
          }
        }
      })
    },
    importCallBack(res) {
      if (!res.success) {
        this.$message({
          showClose: true,
          message: res.message,
          type: 'error',
          duration: 0
        })
        this.importFileList = []
        return
      }
      this.importDialogShow1 = false
      this.importDialogShow2 = false
      this.importDialogShow3 = false
      this.importFileList = []
      this.list()
    },
    settlementStatusChange() {
      this.list()
    },
    onPageSizeChange(pageSize) {
      this.queryData.pageSize = pageSize
      this.list()
    },
    onPageChange(page) {
      this.queryData.currentPage = page
      this.list()
    }
  }
}
</script>
